<template>
    <div class="example-3d">
        <swiper class="swiper" :options="swiperOptions" >
            <swiper-slide v-for="(item,index) in DswiperList" :key="index"><img class="imgg" :src="item.imgUrl" alt=""></swiper-slide>
           
            <!-- <div class="swiper-pagination" slot="pagination"></div> -->
        </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
    props:{
        DswiperList:Array
    },
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return {
            swiperOptions: {
                effect: 'cube',
                grabCursor: true,
                cubeEffect: {
                    shadow: true,
                    slideShadows: true,
                    shadowOffset: 20,
                    shadowScale: 0.94
                },
                autoplay:{
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                    },
                speed:1000,
                pagination: {
                    el: '.swiper-paginations'
                }
            }
        }
    }
}
</script>

<style scoped>
.example-3d {
    position: relative;
    overflow: hidden;
    height: 360px;
    padding: 15px;
}

.swiper {
    width: 300px !important;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;


}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    color: black;
}

.imgg {
    width: 300px;
    height: 300px;
}

::v-deep .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: black;
}
</style>